<template>
    <div>
        <div class="pur-index">
            <el-form  :model="queryParams" label-width="80px" size="small">
                <el-form-item label="投诉人">
                    <el-select v-model="selectedValue" placeholder="Select an option">
                        <el-option v-for="option in options" :key="option.userId" :label="option.userName" :value="option.userId"></el-option>
                    </el-select>
                    <el-button type="primary" @click="queryAll()">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="deptList" :fit="true">
        <el-table-column label="投诉人" prop="userName" />
        <el-table-column label="投诉内容" prop="complaintContent" />
        <el-table-column label="投诉时间"  prop="complaintTime" />
        <el-table-column label="是否已读"  prop="readFlag" >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.readFlag === 0">未读</el-tag>
          <el-tag v-if="scope.row.readFlag === 1">已读</el-tag>
        </template>
        </el-table-column>
        <el-table-column label="操作"  class-name="small-padding fixed-width" fixed="right" width="200">
          <template slot-scope="scopes">
            <el-button @click="queryOne(scopes.row)" size="small">查看详情</el-button>
            <el-button v-if="scopes.row.readFlag === 1" @click="del(scopes.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
    </el-table>

    <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :pageNow="this.queryParams.pageNum"
              :page-sizes="[1,10,20,30,40]"
              :pageSize="this.queryParams.pageSize"
              layout="total,sizes, prev, pager, next, jumper"
              :total="this.total">
    </el-pagination>
    <el-dialog :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :rules="rules"  :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="投诉人Id" prop="musicName">
                <el-input v-model="form.userId" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投诉人名称" prop="createBy">
                <el-input v-model="form.userName" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="投诉内容" prop="musicSize">
                <el-input v-model="form.complaintContent" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="投诉附件" prop="createTime">
              <ul id="ull1">
                  <a style="cursor:pointer" v-for="item in file" :key="file.id">
                    <a :href='item.fileId + fileName'>
                      <li>
                        <i class="el-icon-tickets" style="margin-left: 10px;"></i>
                        <span>{{ item.fileName }}</span>
                        <i class="el-icon-download" style="float: right;line-height: 35px;margin-right: 30px;"></i>
                      </li>
                    </a>
                  </a>
                </ul>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="投诉时间">
                <el-input v-model="form.complaintTime" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </div>
    
</template>
<script>
import { getComplaint,getComplaintone,getComplaintfile} from "@/api/complaint/complaint";
export default {
  name: "Data",
  dicts: ['sys_normal_disable'],
    data() {
        return{
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName:null,
            },
            deptList:[],
            total:0,
            form:{},
            open:false,
            options:[],
            file:[],
            selectedValue:'',
            id : 0,
        }
    },
    created(){
        this.queryAll();
        this.queryUser();
    },
    methods:{
        queryUser(){
            getFrontUserList().then(({data}) =>{
                console.log(data)
                this.options = data.content;
            })
        },
        queryOne(row){
          this.id = row.id
        getComplaintone(row.Id).then(({data}) => {
            //将查询出来的数据存入前端集合
            console.log(data)
		        this.form = data;
            this.queryFile();
		    })
		    .catch(function (error) { // 请求失败处理
		        console.log(error);// 在浏览器的控制台输出错误信息
		    });
        },
        queryFile(){
          alert(this.id)
        getComplaintfile(this.id).then(({data}) => {
        //将查询出来的数据存入前端集合
          console.log(data)
		      this.file = data;
          console.log(this.file)
          this.open = true;
		    })
		    .catch(function (error) { // 请求失败处理
		      console.log(error);// 在浏览器的控制台输出错误信息
		    });
        },
        //全查方法
        queryAll(){
            //调用后台查询方法
		    getComplaint(this.queryParams).then(({data}) => {
            //将查询出来的数据存入前端集合
            console.log(data)
		        this.deptList = data.content;
            //将查询出来的页码存入前端
		        this.queryParams.pageNum = data.pageNum;
		        //将查询出来的额页面显示数量存入前端
		        this.queryParams.pageSize = data.pageSize;
		        //将查询出来的总数存入前端
                this.total = data.totalSize;
		    })
		    .catch(function (error) { // 请求失败处理
		        console.log(error);// 在浏览器的控制台输出错误信息
		    });
        },
        handleSizeChange(val){// 每页MM 条数据
	   		console.log(`每页 ${val} 条数据`);
	   		this.queryParams.pageSize = val;
	   		this.queryAll();
	    },
        handleCurrentChange(val){// 当前第 MM 页
			console.log(`当前第  ${val} 页`);
			this.queryParams.pageNum = val;
	       	this.queryAll();
	    },
   
    }
}
</script>
<style>
.el-input--small{
    width: 20%;
}
</style>